<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <h:head>
        <f:facet name="first">
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        </f:facet>
    </h:head>

    <composite:interface>
        <composite:attribute name="ubigeo"/>
        <composite:attribute name="accion" method-signature="pe.com.cotelasa.scp.entidad.Ubigeo accion()"/>
    </composite:interface>

    <composite:implementation>

        <p:inputText id="idUbigeo" value="#{BKUbigeo.descripcionUbigeo}"/>
        <p:commandButton value="CARGAR UBICACION" styleClass="ui-priority-primary" id="btnUbigeo"
                         actionListener="#{MBUbigeo.inicializar}" immediate="true"
                         onclick="ubigeo.show()" update=":formUbigeo:pnlUbigeo"/>
        <p:message for="idUbigeo" display="text"/>


        <p:dialog widgetVar="ubigeo" id="dlgUbigeo" header="UBICACION" modal="true">
            <h:form id="formUbigeo">
                <p:panelGrid id="pnlUbigeo">
                    <p:row>
                        <p:column>
                            <h:outputLabel value="PAIS(*): " class="lblForm" />
                        </p:column>
                        <p:column>
                            <p:selectOneMenu value="#{BKUbigeo.paisSeleccionado}" converter="#{paisConverter}" required="true"  
                                             effect="fade" var="pais" filter="true" filterMatchMode="contains" id="idPais">  
                                <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                                <f:selectItems value="#{BKUbigeo.listaPaises}" var="pa" itemLabel="#{pa.nombre}" itemValue="#{pa}"/>  

                                <p:column>  
                                    #{pais.nombre}
                                </p:column>  
                                <p:ajax listener="#{MBUbigeo.operarSobrePaisSeleccionado}" update="idCiudad,datosPeru"/>
                            </p:selectOneMenu>  
                            <p:message for="idPais" display="text" />
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column>
                            <h:outputLabel value="CIUDAD(*): " class="lblForm" />
                        </p:column>
                        <p:column>                    
                            <p:selectOneMenu value="#{BKUbigeo.ciudadSeleccionada}" required="true"  
                                             effect="fade" var="ciudad" filter="true" filterMatchMode="contains" id="idCiudad"
                                             disabled="#{BKUbigeo.paisSeleccionado eq null?'true':'false'}" >  
                                <f:selectItem itemLabel="Seleccionar" itemValue="0" />  
                                <f:selectItems value="#{BKUbigeo.listaCiudades}" var="ci" itemLabel="#{ci.nombre}" itemValue="#{ci.codigo}"/>  

                                <p:column>  
                                    #{ciudad.nombre}
                                </p:column>  
                                <p:ajax listener="#{MBUbigeo.operarSobreCiudadSeleccionada}" 
                                        update="#{BKUbigeo.estaPeruSeleccionado eq true?'idProvincia,idDistrito':''}"/>
                            </p:selectOneMenu> 
                            <p:message for="idCiudad" display="text" />
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2">
                            <p:outputPanel id="datosPeru" layout="block" >
                                <h:panelGrid columns="3" style="margin: 10px 0;" 
                                             rendered="#{BKUbigeo.estaPeruSeleccionado eq true?'true':'false'}">

                                    <h:outputText value="PROVINCIA(*): " class="lblForm" /> 
                                    <p:selectOneMenu id="idProvincia" value="#{BKUbigeo.provinciaSeleccionada}" 
                                                     effect="fade" var="provincia" filter="true" filterMatchMode="contains" required="true"  
                                                     disabled="#{BKUbigeo.ciudadSeleccionada eq null?'true':'false'}" >    
                                        <f:selectItem itemLabel="Seleccionar" itemValue="0" />
                                        <f:selectItems value="#{BKUbigeo.listaProvincias}" var="pr" itemLabel="#{pr.nombre}" itemValue="#{pr.codigo}"/> 
                                        <p:ajax event="change" listener="#{MBUbigeo.operarSobreProvinciaSeleccionada}" update="idDistrito"/>
                                        <p:column>  
                                            #{provincia.nombre}
                                        </p:column>  
                                    </p:selectOneMenu>  
                                    <p:message for="idProvincia" display="text"/> 

                                    <h:outputText value="DISTRITO(*): "  class="lblForm" /> 
                                    <p:selectOneMenu id="idDistrito" value="#{BKUbigeo.distritoSeleccionado}" 
                                                     effect="fade" var="distrito" filter="true" filterMatchMode="contains" required="true"
                                                     disabled="#{BKUbigeo.provinciaSeleccionada eq null?'true':'false'}" >   
                                        <f:selectItem itemLabel="Seleccione" itemValue="0"/> 
                                        <f:selectItems value="#{BKUbigeo.listaDistrito}" var="di" itemLabel="#{di.nombre}" itemValue="#{di.codigo}"/> 
                                        <p:column>  
                                            #{distrito.nombre}
                                        </p:column>  
                                    </p:selectOneMenu>  
                                    <p:message for="idDistrito" display="text"/>

                                </h:panelGrid>
                            </p:outputPanel>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="6" style="text-align: center">
                            <p:commandButton style="text-align: center;" value="APLICAR"
                                             actionListener="#{MBUbigeo.aplicarUbigeo}"
                                             oncomplete="if (args.validationFailed){ ubigeo.show()} else {ubigeo.hide()}"
                                             update="pnlUbigeo"/>
                            <p:commandButton type="button" value="CANCELAR" 
                                             style="text-align: center;" onclick="ubigeo.hide()"/>
                        </p:column>
                    </p:row>



                </p:panelGrid>
            </h:form>
        </p:dialog> 
    </composite:implementation>
</html>